<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="../include/tag.jsp"%>
<!DOCTYPE html>
<html lang="zh">
<head>
	<title>表单信息详情</title>
	<%@include file="../include/commonFile.jsp"%>
	<style type="text/css">
		body {
			min-width: auto !important;
			background-color: white !important;
		}

		.info-container {
			padding-top: 10px;
			margin: 0px auto;
			width: 90%;
		}

		.user-infos {
			display: block;
			width: 100%;
		}

		.avater-big {
			width: 140px;
			height: 90px;
			display: inline-block;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			position: relative;
			border: #fff 2px solid;
			border-radius: 4px;
		}

		.layui-table[lay-skin=line] td, .layui-table[lay-skin=line] th {
			border: none;
			border-bottom: 1px dashed #E2E2E1;
		}
		.aui-row {
			overflow: hidden;
			margin: 0;
		}
		[class*=aui-col-xs-] {
			padding: 2.5px;
		}
		.aui-col-xs-4, .aui-col-xs-6 {
			position: relative;
			float: left;
		}
		.aui-col-xs-12 {
			width: 100%;
			position: relative;
		}
		.aui-col-xs-6 {
			width: 50%;
		}
		.aui-col-xs-4 {
			width: 33.33333333%;
		}
		.list-img-1 {
			height: 180px;
		}
		.list-img-4 {
			height: 130px;
		}
		.list-img-3 {
			height: 90px;
		}
		.list-img {
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			position: relative;
		}
		* {
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			-webkit-tap-highlight-color: transparent;
			outline: none;
		}
	</style>
</head>
<body>
<div class="layui-form info-container">
	<table class="layui-table" lay-skin="line">
		<c:set var="thatType" value=""></c:set>
		<c:forEach var="field" items="${fields}">
			<c:set var="thatType" value="${field.type}"></c:set>
			<tr>
				<td width="25%"><div style="word-break: break-all;">${field.title}</div></td>
				<c:set var="thatValue" value=""></c:set>
				<c:forEach var="info" items="${infos}">
					<c:if test="${field.id == info.fieldId}">
						<c:set var="thatValue" value="${info.fieldValue}"></c:set>
					</c:if>
				</c:forEach>
				<c:if test="${thatType == 'image'}">
					<td>
						<c:if test="${not empty thatValue}">
							<c:set var="urls" value="${fn:split(thatValue, ',')}"></c:set>
							<c:choose>
								<c:when test="${fn:length(urls) == 1}">
									<div class="aui-row aui-row-padded">
										<div class="aui-col-xs-12">
											<div style="<c:if test="${ urls[0]!= null}">background-image: url('${urls[0]}?imageMogr2/auto-orient/crop/450x250')</c:if>" class="list-img list-img-1"></div>
											<div class="tc"><a href="${urls[0]}" target="_blank">下载</a></div>
										</div>
									</div>
								</c:when>
								<c:when test="${fn:length(urls) == 2 || fn:length(urls) == 4}">
									<div class="aui-row aui-row-padded">
										<c:forEach var="imgUrl" items="${urls}">
											<div class="aui-col-xs-6">
												<div style="<c:if test="${imgUrl != null}">background-image: url('${imgUrl}?imageMogr2/auto-orient/crop/250x180')</c:if>" class="list-img list-img-4"></div>
												<div class="tc"><a href="${imgUrl}" target="_blank">下载</a></div>
											</div>
										</c:forEach>
									</div>
								</c:when>
								<c:otherwise>
									<c:forEach var="imgUrl" items="${urls}">
										<div class="aui-col-xs-4">
											<div style="<c:if test="${imgUrl != null}">background-image: url('${imgUrl}?imageMogr2/auto-orient/crop/180x180')</c:if>" class="list-img list-img-3"></div>
											<div class="tc"><a href="${imgUrl}" target="_blank">下载</a></div>
										</div>
									</c:forEach>
								</c:otherwise>
							</c:choose>
						</c:if>
					</td>
				</c:if>
				<c:if test="${thatType != 'image'}">
					<td><div style="word-break: break-all;">${thatValue}</div></td>
				</c:if>
			</tr>
		</c:forEach>
	</table>
</div>

<script type="text/javascript">
    function downloadNetWork(imgUrl) {
        location.href = "${ctx}/fileupload/downloadNetwork.do?imgUrl=" + imgUrl;
    }
</script></body>
</html>